<div class="grid-conta">
    <div *ngFor="let item of ranges; index as i" class="item">
        <div *ngIf="isWithRange()">
            <div *ngIf="slideView" class="item-range">
                <range-number [range]="item"></range-number>
            </div>
            <div class="item-range input-slider" *ngIf="!slideView">
                <ng5-slider [(value)]="item.min" [(highValue)]="item.max" [options]="options"></ng5-slider>
            </div>
            <div *ngIf="isWithRangeColor()" style="display: inline-block;">
                <div class="my-form-field">
                    <span>{{'gauges.property-input-color' | translate}}</span>
                    <input [(colorPicker)]="item.color" [value]="item.color" [style.background]="item.color" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
                <div class="my-form-field" style="margin-left: 10px;">
                    <span>{{'gauges.property-input-stroke' | translate}}</span>
                    <input [(colorPicker)]="item.stroke" [value]="item.stroke" [style.background]="item.stroke" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" class="input-color"
                        style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" [cpOutputFormat]="'hex'"/>
                </div>
            </div>
            <div class="item-remove">
                <button mat-icon-button (click)="onRemoveInput(i)" class="remove">
                    <mat-icon>clear</mat-icon>
                </button>
            </div>
        </div>
        <div *ngIf="isMinMax()">
            <div class="item-minmax">
                <div class="my-form-field">
                    <span>{{'gauges.property-input-min' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.min" type="text" style="width: 80px">
                </div>
                <div class="my-form-field" style="padding-left: 20px;">
                    <span>{{'gauges.property-input-max' | translate}}</span>
                    <input numberOnly [(ngModel)]="item.max" type="text" style="width: 80px">
                </div>
                <div class="my-form-field" style="padding-left: 30px">
                    <!-- <span>Unit</span>
                    <input [(ngModel)]="item.text" type="text" style="width: 60px;text-align: center !important"> -->
                </div>
                <div class="my-form-field" style="width: 60px;margin-left: 20px;">
                    <span>{{'gauges.property-input-color' | translate}}</span>
                    <input [(colorPicker)]="item.color" [style.background]="getColor(item)" [cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true"
                        [cpCancelButtonClass]="'cpCancelButtonClass'" [cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'"
                        class="input-color" style="width:70px;" [cpPosition]="'auto'" [cpAlphaChannel]="'always'" />
                </div>
                <!-- <mat-checkbox class="input-minmax-cb" style="padding-left: 30px" [(ngModel)]="withLabel">Range</mat-checkbox> -->
                <!-- <mat-checkbox class="input-minmax-cb" style="padding-left: 20px" [(ngModel)]="withValue">Value</mat-checkbox> -->
            </div>
        </div>
        <div *ngIf="isWithStep()" class="item-step">
            <div class="my-form-field">
                <span>{{'gauges.property-input-value' | translate}}</span>
                <input numberOnly [(ngModel)]="item.min" type="text" style="width: 100px">
            </div>
            <div style="font-size: 18px;width: 11px; display:inline-block;text-align: center;">-</div>
            <div class="my-form-field">
                <span>{{'gauges.property-input-label' | translate}}</span>
                <input [(ngModel)]="item.text" type="text" style="width: 200px;text-align: left !important">
            </div>
            <div class="item-remove">
                <button mat-icon-button (click)="onRemoveInput(i)" class="remove">
                    <mat-icon>clear</mat-icon>
                </button>
            </div>
        </div>
        <div *ngIf="isWithUnit()" class="item-unit">
            <flex-variable #unit [data]="data" (onchange)="onUnitChanged(item, $event)" [variableId]="item.textId" [variableValue]="item.text"
                [variableLabel]="'gauges.property-input-unit'">
            </flex-variable>
            <flex-variable #digits [data]="data" (onchange)="onFormatDigitChanged(item, $event)" [variableId]="item.fractionDigitsId" [variableValue]="item.fractionDigits"
                [variableLabel]="'gauges.property-format-digits'">
            </flex-variable>
        </div>
    </div>
</div>